<template>
  <div>
    <el-card class="navWrap">
      <el-button
        type="text"
        class="btn"
        icon="el-icon-d-arrow-left"
        @click="$emit('goTrading')"
      ></el-button>
      <!-- 添加 -->
      <div v-if="$props.upOrAdd==1">
        <div class="nav">新建一个合同订单</div>
        <div>新建一个合同订单</div>
      </div>
      <!-- 更新 -->
      <div v-else>
        <div class="nav">更新合同订单</div>
        <div>更新合同订单</div>
      </div>

    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="span">基础信息</div>
      </div>
      <!-- 添加 -->
      <div v-if="$props.upOrAdd==1">
        <el-form :model="ruleForm" validate :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标题" prop="name" placeholder="标题">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
  <!-- 总金额 -->
          <el-form-item label="总金额" prop="allPrice" placeholder="输入金额">
            <el-input v-model="ruleForm.allPrice"></el-input>
          </el-form-item>
  <!-- 买方 -->
          <el-form-item label="买方" prop="buy">
            <el-select  v-model="ruleForm.buy" placeholder="请选择活动区域">
              <el-option :label="buyitem.name" :value="buyitem.name" v-for="buyitem in buy" :key="buyitem.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <div class="tishi" v-if=""> -->

          <!-- </div> -->
  <!-- 卖方 -->
          <el-form-item label="卖方" prop="sell">
            <el-select filterable allow-create v-model="ruleForm.sell" placeholder="请选择活动区域">
  <el-option :label="sellitem.name" :value="sellitem.name" v-for="sellitem in sell" :key="sellitem.id"></el-option>
            </el-select>
          </el-form-item>
  <!-- 运营状态 -->
          <el-form-item label="运营状态" error prop="operation">
            <el-select filterable allow-create v-model="ruleForm.operation" placeholder="请选择活动区域">
  <el-option :label="opitem.name" :value="opitem.name" v-for="opitem in operation" :key="opitem.id"></el-option>
            </el-select>
          </el-form-item>
  <!-- 合同 -->
          <el-form-item label="合同" prop="pargain">
            <el-select filterable allow-create v-model="ruleForm.pargain" placeholder="请选择活动区域">
  <el-option :label="paritem.name" :value="paritem.name" v-for="paritem in pargain" :key="paritem.id"></el-option>
            </el-select>
          </el-form-item>
  <!-- 平台 -->       
          <el-form-item label="平台">
            <el-select disabled  value="双链生鲜供应链平台">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
                <!-- 提交按钮 -->
            <el-button type="primary"  @click="submitForm('ruleForm')">提交</el-button>
  <!-- 放弃按钮 -->
            <el-button @click="$emit('goTrading')" >放弃</el-button>
          </el-form-item>

        </el-form> 
      </div>
      <!-- 更新 -->
      <div v-else>
        <el-form :model="upData" :rules="rules" ref="upData" label-width="100px" class="demo-ruleForm">
   <!-- 标题 -->         
          <el-form-item label="标题" prop="displayName" placeholder="标题">
            <el-input v-model="upData.displayName"></el-input>
          </el-form-item>
  <!-- 总金额 -->
          <el-form-item label="总金额" prop="totalAmount" placeholder="输入金额">
            <el-input v-model="upData.totalAmount"></el-input>
          </el-form-item>
          <el-form-item >
                <!-- 提交按钮 -->
            <el-button type="primary"  @click="upSuccess('upData')">提交</el-button>
  <!-- 放弃按钮 -->
            <el-button @click="$emit('goTrading')" >放弃</el-button>
          </el-form-item>
        </el-form>   
      </div>

    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: "AddTrading",
  props:['upOrAdd','tradingUpdate'],
  data(){
    //判断金额
     var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (isNaN(value*1)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 1000000) {
              callback(new Error('必须大于7位数'));
            } else {
              callback();
            }
          }
        }, 500);
      };
      return {
         //添加的对象
         ruleForm:{
           name:'土豪成',
           buy:'土豪',
           sell:'腾讯',
           operation:'土豪有限公司',
          pargain:'不要合同',
          allPrice:'100000000',
          ID:'',
          startTime:'',
          endTime:'',
          index:''
         },
        //  规则判断
         rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          allPrice: [
            { required: true, message: '请输入金额', trigger: 'blur' },
             { validator: checkAge, trigger: 'blur' },
            { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
          ],
          buy: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
          ],
          sell: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          operation: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          pargain: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          displayName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          totalAmount:[
            { required: true, message: '请输入金额', trigger: 'blur' },
             { validator: checkAge, trigger: 'blur' },
            { min: 3, max: 11, message: '请修改金额', trigger: 'blur' }
          ],
        },
        buy:[],//买方数据
        sell:[],//卖方数据
        operation:[],//经营
        pargain:[],//合同
        upData:{}//更新数据
      }
  },

  methods:{
    // 判断输入内容
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.ID = Math.floor(Math.random()*1000000000)
            this.ruleForm.index = Math.floor(Math.random()*10000000000)
            this.ruleForm.startTime = moment(Date.now()).format('YYYY-MM-DD hh:mm')
            this.ruleForm.endTime = moment(Date.now()).format('YYYY-MM-DD hh:mm')
            this.$emit('addItem',this.ruleForm)
            this.$emit('goTrading')
            this.$message.success('添加成功')
          } else {
            return false;
          }
        });
      },
      //更新提交
      upSuccess(upData){
        this.$refs[upData].validate((valid) => {
          if (valid) {
            this.$emit('upItem',this.upData)
            this.$emit('goTrading')
            this.$message.success('更新成功')
          } else {
            return false;
          }
        });
      },
      // 获取数据
      async getData(){
        let result = await this.$API.trading.getAdd()//获取添加数据
        this.buy = result.addTrading.buy.slice(0,100)//买方数据
        this.sell = result.addTrading.sell.slice(0,100)//买方数据
        this.operation = result.addTrading.operation//运营数据
        this.pargain = result.addTrading.bargain.slice(0,100)//合同数据
        // 获取更新数据
        this.upData = this.$props.tradingUpdate
      },

  },
  mounted(){
    this.getData()
  }
};
</script>

<style lang="less" scoped>
.btn1{
  width: 600px;
  margin: 0 auto;
}
.nav {
  font-size: 23px;
  font-weight: 500;
  // vertical-align: bottom;
  margin: 10px 50px 30px 50px;
  display: inline-block;
}
.btn {
  font-size: 25px;
  position: absolute;
  top: 18px;
}
//中间部分
.box-card{
  width: 97%;
  margin: 30px auto ;
  .span{
    padding: 5px 15px;
    font-size: 18px;
  }

    .demo-ruleForm {
      width: 800px;
      // margin-left: 100px;
      margin: 0 auto;
    }
  ::v-deep.el-input__inner{
    width: 800px;
    // height: 45px;
    // font-size: 20px;
  }
  ::v-deep.el-form-item__label{
    font-size: 16px;
  }
}
</style>
